<template>
  <!-- 基础题库 -->
  <div class="dashboard-container ">
    <div class="app-container">
      <!-- Card卡片 -->
      <el-card shadow="never">
        <!-- 顶部新增试题那行 -->
        <div class="btn_wrapper">
          <span style="font-size: 12px; color: pink;"
            >说明：目前支持学科和关键字条件筛选</span
          ><el-button
            size="small"
            icon="el-icon-edit"
            type="success"
            @click="$router.push('new')"
            >新增试题</el-button
          >
        </div>
        <!-- /顶部新增试题那行 -->

        <!-- 表单部分,内容多得老子想杀人,改样式改了你妈1天还没弄好 -->
        <el-form
          :model="form"
          label-width="80px"
          class="LH-form-demo"
          ref="form"
        >
          <el-form-item label="学科" prop="subjectID">
            <el-select
              v-model="form.subjectID"
              placeholder="请选择"
              @change="get_SecondDirectory"
            >
              <el-option
                :label="item.label"
                :value="item.value"
                v-for="(item, index) in subjectList"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="二级目录" prop="catalogID">
            <el-select v-model="form.catalogID" placeholder="请选择">
              <el-option
                :label="item.label"
                :value="item.value"
                v-for="(item, index) in SecondDirectory"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="标签" prop="tags">
            <el-select v-model="form.tags" placeholder="请选择">
              <el-option
                :label="item.label"
                :value="item.value"
                v-for="(item, index) in TagsList"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="关键字" prop="keyword">
            <el-input v-model="form.keyword" placeholder="根据题干搜索">
            </el-input>
          </el-form-item>

          <el-form-item label="试题类型" prop="questionType">
            <el-select v-model="form.questionType" placeholder="请选择">
              <el-option
                :label="item.label"
                :value="item.value"
                v-for="(item, index) in questionType"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="难度" prop="difficulty">
            <el-select v-model="form.difficulty" placeholder="请选择">
              <el-option
                :label="item.label"
                :value="item.value"
                v-for="(item, index) in difficulty"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="方向" prop="direction">
            <el-select v-model="form.direction" placeholder="请选择">
              <el-option
                :label="item"
                :value="item"
                v-for="(item, index) in direction"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="录入人" prop="creatorID">
            <el-select v-model="form.creatorID" placeholder="请选择">
              <el-option label="超级管理员" value="超级管理员"></el-option>
              <el-option label="录入管理员" value="录入管理员"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="题目备注" prop="remarks">
            <el-input v-model="form.remarks"></el-input>
          </el-form-item>

          <el-form-item label="企业简称" prop="shortName">
            <el-input v-model="form.shortName"></el-input>
          </el-form-item>

          <el-form-item label="城市" class="LH-city" prop="province">
            <el-select
              v-model="form.province"
              placeholder="请选择"
              @change="getarealist"
            >
              <el-option
                :label="item"
                :value="item"
                v-for="(item, index) in provinces"
                :key="index"
              ></el-option>
            </el-select>

            <el-select v-model="form.city" placeholder="请选择">
              <el-option
                :label="item"
                :value="item"
                v-for="(item, index) in citys"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item class="LH-btn-area">
            <el-button class="LH-clear" @click="resetForm('form')"
              >清除</el-button
            >
            <el-button type="primary" class="LH-search" @click="searchQuestions"
              >搜索</el-button
            >
          </el-form-item>
        </el-form>
        <!-- /表单部分-->

        <el-alert
          :title="
            questionsCounts <= 0 ? `暂无数据` : `数据一共 ${questionsCounts} 条`
          "
          type="info"
          :closable="false"
          show-icon
          style="margin-bottom: 10px"
        >
        </el-alert>

        <!-- 表格,数据 -->
        <el-table
          :data="questionsList"
          v-loading="listLoading"
          element-loading-text="给我一点时间"
          style="width: 100%"
          :header-cell-style="{
            'background-color': '#fafafa',
            'border-bottom': '2px solid #e8e8e8'
          }"
        >
          <el-table-column label="试题编号" width="130">
            <template slot-scope="scope">
              <span>{{ scope.row.number }}</span>
            </template>
          </el-table-column>

          <el-table-column label="学科" width="90">
            <template slot-scope="scope">
              <span>{{ scope.row.subject }}</span>
            </template>
          </el-table-column>

          <el-table-column label="目录" width="100">
            <template slot-scope="scope">
              <span>{{ scope.row.catalog }}</span>
            </template>
          </el-table-column>

          <el-table-column label="题型" width="80">
            <template slot-scope="scope">
              <span v-if="scope.row.questionType == 1">单选 </span>
              <span v-else-if="scope.row.questionType == 2">多选 </span>
              <span v-else>简答 </span>
            </template>
          </el-table-column>

          <el-table-column label="题干" width="250">
            <template slot-scope="scope">
              <span v-html="scope.row.question"></span>
            </template>
          </el-table-column>

          <el-table-column label="录入时间" width="180">
            <template slot-scope="scope">
              <span>{{ scope.row.addDate | parseTimeByString }}</span>
            </template>
          </el-table-column>

          <el-table-column label="难度" width="80">
            <template slot-scope="scope">
              <span v-if="scope.row.difficulty == 1">简单</span>
              <span v-else-if="scope.row.difficulty == 2">一般</span>
              <span v-else>困难 </span>
            </template>
          </el-table-column>

          <el-table-column label="录入人" width="120">
            <template slot-scope="scope">
              <span>{{ scope.row.creator }}</span>
            </template>
          </el-table-column>

          <el-table-column label="操作" width="200">
            <template slot-scope="scope">
              <el-button
                type="primary"
                icon="el-icon-view"
                circle
                size="small"
                title="预览"
                plain
                @click="Topicpreview(scope.row.id)"
              ></el-button>
              <el-button
                type="success"
                icon="el-icon-edit"
                title="修改"
                size="small"
                circle
                plain
                @click="$router.push(`new?id=${scope.row.id}`)"
              ></el-button>
              <el-button
                type="danger"
                icon="el-icon-delete"
                title="删除"
                size="small"
                circle
                plain
                @click="deleteList(scope.row.id)"
              ></el-button>
              <el-button
                type="warning"
                icon="el-icon-check"
                title="加入精选"
                size="small"
                circle
                plain
                @click="addChoice(scope.row.id)"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- /表格,数据 -->

        <!-- 题目预览 -->
        <QuestionsPreview
          :dialogTableVisible="dialogTableVisible"
          :answerDetailData="answerDetailData"
          @close="dialogTableVisible = false"
        ></QuestionsPreview>

        <div class="block">
          <PageTool
            :paginationPage="form.page"
            :paginationPagesize="form.pagesize"
            :total="questionsCounts"
            @pageChange="handleCurrentChange"
            @pageSizeChange="handleSizeChange"
          >
          </PageTool>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import { simple } from "@/api/hmmm/subjects.js";
import { Directory } from "@/api/hmmm/directorys.js";
import { tags } from "@/api/hmmm/tags.js";
import { difficulty, questionType, direction } from "@/api/hmmm/constants.js";
import { provinces, citys } from "@/api/hmmm/citys.js";
import { list, remove, detail, choiceAdd } from "@/api/hmmm/questions.js";
import PageTool from "../../module-manage/components/page-tool.vue";
import QuestionsPreview from "@/module-hmmm/components/questions-preview.vue";

export default {
  components: {
    PageTool,
    QuestionsPreview
  },
  data() {
    return {
      form: {
        subjectID: null, // 学科
        catalogID: null, // 目录
        tags: null, // 标签
        questionType: null, // 试题类型
        direction: null, // 方向
        creatorID: null, // 录入人
        remarks: null, // 题目备注
        shortName: null, // 企业简称
        province: null, // 省份
        city: null, // 城市
        difficulty: null, // 难度
        keyword: null, // 关键字
        page: 1, // 当前页数
        pagesize: 5 // 每页条数
      },
      listLoading: true,
      // 学科 选项列表
      subjectList: [],
      // 二级目录 选项列表
      SecondDirectory: [],
      // 标签 选项列表
      TagsList: [],
      // 难度 选项列表
      difficulty: difficulty,
      // 题型 选项列表
      questionType: questionType,
      // 方向 选项列表
      direction: direction,
      // 所有省份
      provinces: provinces(),
      // 城市
      citys: [],

      // ---------------------------------------------------------------
      // 基础题库列表数量
      questionsCounts: null,
      // 基础题库列表
      questionsList: [],
      // 题目预览组件的弹出状态
      dialogTableVisible: false,
      // 弹窗信息的对象
      answerDetailData: {}
    };
  },
  created() {
    this.get_Subjectlist();
    this.get_questionsList();
  },
  methods: {
    // 获取学科列表
    async get_Subjectlist() {
      try {
        const { data } = await simple();
        // console.log(data)
        this.subjectList = data;
        // console.log(this.subjectList)
      } catch (error) {
        console.log(error);
      }
    },
    // 获取二级目录,通过学科的Id获取
    async get_SecondDirectory() {
      this.form.catalogueID = null;
      this.form.tags = null;
      try {
        const { data } = await Directory({
          subjectID: this.form.subjectID
        });
        // console.log(data)
        this.SecondDirectory = data;
        this.get_Tags();
      } catch (error) {
        console.log(error);
      }
    },
    // 获取标签列表,通过学科ID获取
    async get_Tags() {
      try {
        const { data } = await tags({
          subjectID: this.form.subjectID
        });
        // console.log(data)
        this.TagsList = data;
      } catch (error) {
        console.log(error);
      }
    },
    // 获取省下的城市
    getarealist() {
      const r = citys(this.form.province);
      // console.log(r)
      this.citys = r;
    },
    // 清除表单内容
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.form.city = null;
      this.citys = [];
    },
    // 筛选题库
    async searchQuestions() {
      try {
        this.form.page = 1;
        const { data } = await list(this.form);
        // console.log(data)
        this.questionsCounts = data.counts;
        this.questionsList = data.items;
        this.questionsCounts > 0
          ? this.$message.success(`搜索到了${this.questionsCounts}条数据`)
          : this.$message.warning("暂无数据");
      } catch (error) {
        this.$message.error("搜索失败!");
      }
    },
    // 获取基础题库列表
    async get_questionsList() {
      this.listLoading = true;
      try {
        const { data } = await list(this.form);
        // console.log(data.items)
        this.questionsCounts = data.counts;
        this.questionsList = data.items;
        this.listLoading = false;
      } catch (error) {
        console.log(error);
      }
    },

    // 基础题库删除
    deleteList(id) {
      this.$confirm("此操作将永久删除 " + ", 是否继续?", "提示", {
        type: "warning"
      }).then(() => {
        remove({ id })
          .then(res => {
            // 为了在删除最后一页的最后一条数据时能成功跳转回最后一页的上一页
            const totalPage = Math.ceil(
              (this.questionsCounts - 1) / this.form.pagesize
            ); // 总页数
            this.form.page =
              this.form.page > totalPage ? totalPage : this.form.page;
            this.form.page = this.form.page < 1 ? 1 : this.form.page;
            // ----------------------------------------------
            this.questionsList.splice(id, 1);
            this.get_questionsList();
            this.$message.success("成功删除了" + "!");
          })
          .catch(res => {
            this.$message.error("删除失败!", res);
          });
      });
    },
    // 题目预览
    async Topicpreview(id) {
      this.dialogTableVisible = true;
      const { data } = await detail({ id });
      this.answerDetailData = data;
    },
    // 加入精选题库
    addChoice(id) {
      this.$confirm("此操作将加入精选题库 " + ", 是否继续?", "提示", {
        type: "warning"
      }).then(() => {
        choiceAdd({ id, choiceState: 1 })
          .then(res => {
            // 为了在删除最后一页的最后一条数据时能成功跳转回最后一页的上一页
            const totalPage = Math.ceil(
              (this.questionsCounts - 1) / this.form.pagesize
            ); // 总页数
            this.form.page =
              this.form.page > totalPage ? totalPage : this.form.page;
            this.form.page = this.form.page < 1 ? 1 : this.form.page;
            // -----------------------------------------------------------------------
            this.questionsList.splice(id, 1);
            this.get_questionsList();
            this.$router.push("/questions/choice");
            this.$message.success("成功加入了精选题库" + "!");
          })
          .catch(res => {
            this.$message.error("加入失败!", res);
          });
      });
    },

    // 每页显示信息条数
    handleSizeChange(val) {
      this.form.pagesize = val;
      if (this.form.page === 1) {
        this.get_questionsList(this.form);
      }
    },
    // 进入某一页
    handleCurrentChange(val) {
      this.form.page = val;
      this.get_questionsList();
    }
  }
};
</script>

<style scoped lang="scss">
.btn_wrapper {
  justify-content: space-between;
  margin-bottom: 15px;
  display: flex;
}
.LH-form-demo {
  display: flex;
  flex-wrap: wrap;
  .el-form-item {
    flex: 25%;
  }
}
//城市区域
.LH-city {
  ::v-deep .el-form-item__content {
    display: flex;
    .el-select {
      margin-right: 5px;
    }
  }
}
//城市区域

//按钮区域
.LH-btn-area {
  display: flex;
  flex-direction: row-reverse;
  .LH-clear,
  .LH-search {
    width: 56px;
    height: 32px;
    font-size: 12px;
    padding: 0;
  }
}
</style>
